<template>
  <el-row>
    <el-col :span="24">
      <el-row>
        <el-col :span="11">
          <div class="flex">
            <el-transfer
              :titles="title1"
              :props="{
                key: 'id',
                label: 'title'
              }"
              v-model="distributedMaterial"
              :data="undistributedMaterial"
              @left-check-change="setMaterial"
              @right-check-change="setMaterial"
            ></el-transfer>
          </div>
        </el-col>
        <el-col :span="13">
          <h3 style="margin-left: 30px;">当前所选材料详情</h3>
          <!-- {{materialLabel}} -->
          <el-form label-width="100px" size="small">
            <el-col :span="8">
              <el-form-item label="项目id">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content=" '' + materialLabel.project_id"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.project_id}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子项目id">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content=" '' + materialLabel.id"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.id}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="课题名称">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.title"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.title}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主题词">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.theme"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.theme}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目编号">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.pro_no"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.pro_no}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="研究方向">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.research_direction"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.research_direction}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.unit"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.unit}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮编">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content="'' + materialLabel.post_code"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.post_code}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通讯地址">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.postal_address"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.postal_address}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="材料分组">
                <el-input v-model="materialLabel.group_id" readonly></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="项目类别">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content="'' + materialLabel.support - 1 >= 0 ? supports[materialLabel.support - 1]['title'] : ''"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        <!-- {{materialLabel.support}} -->
                        {{showSupport(materialLabel.support)}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划完成时间">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.finish_time"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.finish_time}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最终成果形式">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="materialLabel.result"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{materialLabel.result}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申报成果">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 3 }"
                  v-model="materialLabel.achievement"
                  readonly
                ></el-input>
                <!-- <el-input v-model="materialLabel.achievement"></el-input> -->
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="11">
          <div class="flex">
            <el-transfer
              :props="{
                key: 'id',
                label: 'name'
              }"
              :titles="title2"
              v-model="distributedExpert"
              :data="undistributedExpert"
              @left-check-change="setExpert"
              @right-check-change="setExpert"
            ></el-transfer>
          </div>
        </el-col>
        <el-col :span="13">
          <h3 style="margin-left: 30px;">当前所选专家详情</h3>
          <!-- {{expertLabel}} -->
          <el-form label-width="100px" size="small">
            <el-col :span="8">
              <el-form-item label="项目id">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content="'' + expertLabel.project_id"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.project_id}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专家id">
                <div style="width: 100%;">
                  <!-- <el-tooltip
                    :content="'' + expertLabel.id"
                    placement="top-start"
                  > -->
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.id}}
                      </span>
                    </div>
                  <!-- </el-tooltip> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专家姓名">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="expertLabel.name"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.name}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="expertLabel.idnumber"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.idnumber}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="研究方向">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="expertLabel.direction"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.direction}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职称">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="expertLabel.jobrank"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.jobrank}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在单位">
                <div style="width: 100%;">
                  <el-tooltip
                    :content="expertLabel.unit"
                    placement="top-start"
                  >
                    <div class="text-tips">
                      <span class="text-style">
                        {{expertLabel.unit}}
                      </span>
                    </div>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <div class="flex" style="margin-top:50px;">
            <el-button type="primary" @click="goback()" size="mini"
              >返 回</el-button
            >
            <el-button
              :disabled="$route.params.status == 2"
              type="primary"
              @click="setExtAndMat()"
              size="mini"
              >确 定</el-button
            >
          </div>
          <div
            class="flex"
            style="margin-top:20px;"
            v-if="$route.params.status == 2"
          >
            <i style="color: blueviolet;"
              >当前分组内某专家已完成所有评审工作<br />或某材料已被全部评审，无法分配！！！</i
            >
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data() {
    return {
      supports: Lockr.get('support'),
      materialLabel: '',
      expertLabel: '',
      undistributedMaterial: [],
      distributedMaterial: [],
      undistributedExpert: [],
      distributedExpert: [],
      experts: [],
      materials: [],
      title1: ['待分配材料', '组内材料'],
      title2: ['待分配专家', '组内专家']
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
  },
  methods: {
    showSupport(index) {
      if (index == 0) {
        return '暂未评级'
      } else if (index == undefined) {
        return ''
      } else {
        return this.supports[index - 1]['title']
      }
    },
    goback() {
      router.go(-1)
    },
    setExtAndMat() {
      // 将两个distributed数组传给后台
      let data = {
        group_id: this.$route.params.gro_id,
        experts: this.distributedExpert,
        materials: this.distributedMaterial
      }
      this.apiPost('admin/Report/setEndExtAndMat', data).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg('success', '结题专家和材料分配成功')
          this.init()
        })
      })
    },
    reset() {
      this.undistributedMaterial = []
      this.distributedMaterial = []
      this.undistributedExpert = []
      this.distributedExpert = []
      this.experts = []
      this.materials = []
    },
    setExpert(key, key1) {
      this.experts.forEach(element => {
        if (element.id == key1) {
          this.expertLabel = element
        }
      })
    },
    setMaterial(key, key1) {
      this.materials.forEach(element => {
        if (element.id == key1) {
          this.materialLabel = element
        }
      })
    },
    getAllMaterial() {
      let data = {
        params: {
          project_id: this.$route.params.pro_id
        }
      }
      this.apiGet('admin/Report/getEndAllMaterial', data).then(res => {
        this.handelResponse(res, data => {
          //console.log(data)
          this.materials = data
          // 将未分配材料放入undistributedMaterial
          this.materials.forEach(element => {
            // 该材料已经被评审
            if (element.count > 0) {
              element['disabled'] = true
            } else {
              element['disabled'] = false
            }
            this.undistributedMaterial.push(element)
            if (element.groupend_id == this.$route.params.gro_id) {
              // 已经分配给该组的材料直接放进来
              this.distributedMaterial.push(element.id)
            }
          })
        })
      })
    },
    getAllExpert() {
      let data = {
        params: {
          project_id: this.$route.params.pro_id
        }
      }
      this.apiGet('admin/Report/getEndAllExpert', data).then(res => {
        this.handelResponse(res, data => {
          this.experts = data
          this.experts.forEach(element => {
            // 专家已经做出评审
            if (element.count > 0) {
              element['disabled'] = true
            } else {
              element['disabled'] = false
            }
            this.undistributedExpert.push(element)
            if (element.group_id == this.$route.params.gro_id) {
              // 该专家已经被分配给本组了
              this.distributedExpert.push(element.id)
            }
          })
        })
      })
    },
    init() {
      // 置空
      this.reset()
      // 获取所有该大项目的专家
      this.getAllExpert()
      // 获取所有该大项目的材料
      this.getAllMaterial()
    }
  },
  mixins: [http]
}
</script>
<style scoped>
.flex {
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
  margin: 0 auto;
}
.text-tips {
  /* border: 1px solid #DCDFE6; */
  /* width: 100%; */
  border-radius: 4px;
  background: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-style {
  padding: 0 15px;
  color: #606266;
}
</style>
